<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<restaurant-order-list
			:orderedInfo="orderedInfo"
			:currentUserId="currentUserId"
			:operationButton="operationButton"
			@click-order-details="clickOrderDetails"
			@cancel-order="cancelOrder"
			@received-order="receivedOrder"
		></restaurant-order-list>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { apiRestaurantOrdersByStatus, apiRestaurantEditOrderStatus } from '../../../utils/apiRestaurant';
	import { getDataFromStorage } from '../../../utils/commonUtils';
	//==============================标题===============================
	//标题内容
	const titleContent = ref({
		left:'返回',
		midst:'餐厅-已下单'
	});
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/message/message'
		});
	};
	//-------------------------------订单组件-------------------------------------
	// 定义数据
	const orderedInfo = ref([]); // 要从 API 获取的订单信息
	const currentUserId = ref(0); // 当前用户的 ID
	const operationButton = ref({
		opera1:"取消订单",
		opera2:"接单"
	})
	// 获取数据的生命周期钩子
	onLoad(() => {
		apiRestaurantOrdersByStatus(1).then((res) => {
			orderedInfo.value = res;
			// console.log(orderedInfo.value);
		})
		getDataFromStorage('userId').then((res) => {
			currentUserId.value = res ? Number(res) : 0; // 确保是数字，设置默认值为0
			// console.log(currentUserId.value)
			// console.log(typeof(currentUserId.value));
		})
	})
	//-----------------------------订单细节-------------------------------------
	const clickOrderDetails = (orderNo) => {
		uni.navigateTo({
			url:`/pages/index/restaurant/restaurant-checkout?orderNo=${encodeURIComponent(orderNo)}`
		})
	}
	//-----------------------------取消订单-------------------------------------
	const cancelReason = ['不想要了', '下错单了', '其他'];
	const cancelOrder = (orderNo) => {
		// console.log(orderNo);
		uni.showActionSheet({
			itemList: ['不想要了', '下错单了', '其他'],
			success: function (res) {
				console.log(res.tapIndex);
				let editOrder = {
					'orderNo':orderNo,
					'status':4,
					'cancelReason':cancelReason[res.tapIndex],
				}
				// console.log(editOrder)
				apiRestaurantEditOrderStatus(editOrder).then(() => {
					uni.redirectTo({
						url:`/pages/index/restaurant/restaurant-checkout?orderNo=${encodeURIComponent(orderNo)}`
					})
				})
			}
		});
	}
	
	//-----------------------------确认订单-------------------------------------
	const receivedOrder = (orderNo) => {
		// console.log(orderNo);
		uni.showModal({
			title:"是否确认接单？",
			success:function(res){
				// console.log(res);
				if (res.confirm) {
					let editOrder = {
						'orderNo':orderNo,
						'status':2
					}
					apiRestaurantEditOrderStatus(editOrder).then(() => {
						uni.redirectTo({
							url:`/pages/index/restaurant/restaurant-checkout?orderNo=${encodeURIComponent(orderNo)}`
						})
					})
				}
			}
		})
	}
	
	
</script>

<style lang="scss" scoped>
	
	.ordered-list{
		// background-color: aqua; /* 设置背景颜色 */
		height: calc(100vh - 44px); /* 设置高度使其在视口内 */
		overflow-y: auto; /* 允许垂直滚动 */
		.ordered-list-info{
			width: 710rpx;
			height: 420rpx;
			margin: 20rpx;
			background-color: rgba(135, 206, 235, 0.3);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			.order-orderNo{
				font-size: 12px;
				padding: 10rpx 0rpx 10rpx 10rpx;
			}
			
			.ordered-images-others{
				width: 710rpx;
				height: 170rpx;
				display: flex;
				flex-direction: row;
				padding: 10rpx;
				.ordered-images{
					width: 490rpx;
					height: 170rpx;
					display: flex;
					overflow-x: auto; /* 允许水平滚动 */
					white-space: nowrap; /* 防止换行 */
					.image-container{
						display: inline-block; /* 允许图像并排 */
						image{
							width: 130rpx;
							height: 130rpx;
							border-radius: 30rpx;
							padding: 5rpx;
						}
					}
					
				}
				.click-operation{
					display: flex;
					.ordered-others{
						width: 160rpx;
						height: 170rpx;
						// background-color: saddlebrown;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.ordered-price{
							font-size: 18px;
						}
						.ordered-count{
							padding-top: 10rpx;
							font-size: 14px;
						}
					}
					.right-row{
						width: 50rpx;
						height: 170rpx;
						// background-color: aqua;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
			}
			.ordered-time{
				padding: 10rpx 0rpx 10rpx 10rpx;
			}
			.ordered-operation{
				height: stretch;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 50rpx;
				.order-operation-button{
					background-color: #f8f8f8;
					width: 200rpx;
				}
				.order-operation-order{
					background-color: #94c86c;
					width: 200rpx;
				}
			}
		}
		
	}
</style>